<template>
  <div class="container">
    <nav-bar title="课程报名清单" />
    <!-- 产品分类 -->
    <div class="product-tabs">
      <switch-tab 
        :tabList="tabList" 
        :curTabIndex="curTabIndex" 
        @itemClicked="tabClicked" 
      />
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in ordersList[curTabIndex]" :key="index">
        <div class="main">
          <div class="img">
            <img src='../../assets/img/person.png' />
          </div>
          <div class="name">{{item.nickName}}</div>
          <div class="status">{{tabList[curTabIndex]}}</div>
        </div>
        <div class="infor">
          <p>订单编号:{{item.orderId}}</p>
          <p>下单时间:{{item.orderDate}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import SwitchTab from 'components/common/SwitchTab'
import { getClassList } from '../../network/class'

export default {
  components: {
    NavBar,
    SwitchTab
  },
  data() {
    return {
      tabList: [
        '未使用',
        // '已提交',
        '已确认',
        '已取消'
      ],
      ordersList:[
        [],
        [],
        [],
      ],
      // closeOrders:[], // 已取消
      // finishOrders:[], // 已确认
      // waitVerificationOrders:[], // 未使用
      curTabIndex: 0,
    }
  },
  mounted() {
    let requestData = {
      productId: this.$route.query.id
    }
    getClassList(requestData, res => {
      this.$set(this.ordersList, 2, res.closeOrders)
      this.$set(this.ordersList, 1, res.finishOrders)
      this.$set(this.ordersList, 0, res.waitVerificationOrders)
    })
  },
  methods: {
    tabClicked(e){
      this.curTabIndex = e
    }
  },
}
</script>

<style scoped>
.product-tabs{
  padding: 15px 10px;
}
.list .item{
  margin: 0 10px;
  margin-bottom: 10px;
  padding: 20px 0 0 0;
  background-color: #ffffff;
}
.list .item .main{
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
}
.list .item .main img{
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border-radius: 50%;
}
.list .item .main .name{
  flex-grow: 1;
  font-size: 16px;
}
.list .item .main .status{
  font-size: 16px;
}
.list .item .infor{
  position: relative;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
  padding: 12px 15px;
  margin-top: 15px;
  border-top: 1px solid #f6f6f6;
}
.list .item .infor:before,
.list .item .infor:after{
  position: absolute;
  top: -7px;
  display: block;
  content: '';
  width: 6px;
  height: 12px;
  background-color: #f2f2f2;
}
.list .item .infor:before{
  left: 0;
  border-radius: 0 6px 6px 0;
}
.list .item .infor:after{
  right: 0;
  border-radius: 6px 0 0 6px;
}
</style>